<script>
export default{
  // eslint-disable-next-line vue/multi-word-component-names
  name:'Login',
  data(){
    return{
      name: "",
      id: ""
    }
  },
  methods: {
    onSubmit: function () {

    }
  }
}
</script>

<template>
  <el-row type="flex" justify="center">

    <el-form class="bg-login">
      <h2>登录</h2>
      <el-form-item class="item" label="姓名：">
        <el-input v-model="name" placeholder="请输入姓名"/>
      </el-form-item>

      <el-form-item class="item" label="学号：">
        <el-input v-model="id" placeholder="请输入学号"/>
      </el-form-item>

      <el-form-item class="item">
        <el-button class="Submit" type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
      <el-form-item>
        <h5 class="Submit">
          没有账号？去<router-link to="/signup">注册</router-link>一个
        </h5>

      </el-form-item>
    </el-form>
  </el-row>
</template>

<style scoped>
.bg-login {

  border-radius: 10px;
  margin: auto;

  overflow: hidden;
  padding-top: 5px;

  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}

.item{
  padding-left: 10px;
  padding-right: 10px;;
}
.Submit{
  margin:0 auto;
}
h2{
  margin-top: 20px;
  margin-bottom: 20px;
  color:#1d1d1f;
  text-align: center;
  animation: fade-in 1s ease-in-out;
}
</style>